<template>
    <div class="container">
        <div class="view">

            <router-view></router-view>

        </div>

        <van-tabbar
            placeholder
            v-model="active"
        >
            <van-tabbar-item
                v-for="tab in tabs"
                :key="tab.name"
                :to="tab.to"
                :name="tab.name"
                :badge="tab.badge">
                {{ tab.title }}
                <template #icon>
                    <wp-icon
                        class="iconfont"
                        class-prefix='icon-wp'
                        size="26"
                        :name="tab.icon" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import WpIcon from '@/components/_wp_components/WpIcon.vue';
import { getCurrentInstance, watch, computed, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';

export default {
    components: {
        WpIcon
    },
    name: 'StaffOrderHomeView',
    setup (props, context) {
        const ctx = getCurrentInstance();
        const $st = ctx.appContext.config.globalProperties.$st;
        const route = useRoute();
        const store = useStore();

        const message_number = computed(() => {
            return store.state.system_message_priview_number === 0 ? '' : store.state.system_message_priview_number;
        });
        const tabs = reactive([{
            icon: 'query',
            to: 'maintenancelist',
            title: $st('Repair_Order'),
            name: 'maintenancelist'
        }, {
            icon: 'a-jixiebi1',
            to: 'device',
            title: $st('wp-she-bei'),
            name: 'device'
        }, {
            icon: 'gongzuosi',
            to: 'workbench',
            title: $st('wp-gong-zuo-tai'),
            name: 'workbench'
        }, {
            icon: 'my',
            to: 'personalcenter',
            title: $st('My'),
            name: 'personalcenter',
            badge: message_number
        }]);
        const active = ref(tabs[0].name);
        active.value = route.name;

        watch(route, () => {
            active.value = route.name;
        });
        return {
            tabs,
            active,
            message_number
        };
    }
};
</script>

<style lang="scss" scoped>
.container{
    display: flex;
    flex-direction: column;

    :deep(.van-badge--fixed){
        right:-10px;
    }
    :deep(:root) {
        --van-tabbar-item-icon-size: 26px;
    }
}
.view{
    flex-grow: 1;

}
</style>
